<template>
  <div>
    <!-- 头部区域 -->
    <city-head></city-head>
    <!-- 搜索区域 -->
    <city-search :cities="alphabetCityList"></city-search>
    <!-- 城市列表区域 -->
    <city-list :hotCityList="hotCityList" :alphabetCityList="alphabetCityList"></city-list>
  </div>
</template>

<script>
import axios from 'axios'
import CityHead from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
export default {
  name: 'City',
  data () {
    return {
      /* 热门城市列表 */
      hotCityList: [],
      /* 字母城市列表 */
      alphabetCityList: {}
    }
  },
  components: {
    CityHead,
    CitySearch,
    CityList
  },
  /* 获取热门城市列表和字母城市列表 */
  async mounted () {
    const { data: res } = await axios.get('/api/city.json')
    this.hotCityList = res.data.hotCities
    this.alphabetCityList = res.data.cities
  }
}
</script>

<style>

</style>
